import React, { Component } from 'react'
import Header from '../../components/Header/Header'
import { reqregister } from '../../http/api'
import { Form, Input, Button, Toast } from 'antd-mobile'

export default class Register extends Component {
  constructor() {
    super()
    // 初始化状态
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: ""
      }
    }
  }
  // 封装获取表单的数据的函数
  getUserInfo(value, key) {
    this.setState({
      user: {
        ...this.state.user,
        [key]: value
      }
    })
  }
  // 发送注册请求
  async register() {
    let res = await reqregister(this.state.user)
    if (res.data.code === 200) {
      Toast.show({
        icon: 'success',
        content: res.data.msg
      })
      this.props.history.push("/login");
    }


  }
  render() {
    let { user } = this.state
    return (
      <div>
        <Header back title="注册"></Header>
        {/* <div>user:{JSON.stringify(user)}</div> */}
        <Form layout='horizontal'>
          <Form.Item label='手机号' name='phone'>
            <Input
              placeholder='请输入手机号'
              clearable
              onChange={(value) => { this.getUserInfo(value, "phone") }}
            />
          </Form.Item>

          <Form.Item label='昵称' name='nickname'>
            <Input
              placeholder='请输入昵称'
              clearable
              onChange={(value) => { this.getUserInfo(value, "nickname") }}
            />
          </Form.Item>

          <Form.Item label='密码' name='password'>
            <Input
              placeholder='请输入密码'
              clearable type='password'
              onChange={(value) => { this.getUserInfo(value, "password") }}
            />
          </Form.Item>
          <Button block color='danger' size='large'
          onClick={()=>{this.register()}}
          >注册</Button>
        </Form>
      </div>
    )
  }
}
